<template>
    <view class="page flex-col">
        <div class="step-1" v-if="step === 1">
            <person-info-step ref="step1" :step="step" @update:step="handleStep"></person-info-step>
        </div>
        <div class="step-2" v-if="step === 2">
            <person-info-sec-step ref="step2" :step="step" @update:step="handleStep"></person-info-sec-step>
        </div>
        <div class="step-3" v-if="step === 3">
            <person-info-trd-step ref="step3" :step="step" @update:step="handleStep"></person-info-trd-step>
        </div>
        <view class="group-btns">
            <view v-if="step > 1" class="back-btn" @click="handleBack">
                <u-icon name="arrow-left" size="24"></u-icon>
            </view>
            <view class="next-btn" @click="handleNext">下一步</view>
        </view>
    </view>
</template>
<script>
import personInfoStep from './personInfoStep.vue'
import personInfoSecStep from './personInfoSecStep.vue'
import personInfoTrdStep from './personInfoTrdStep.vue'
export default {
    components: {
        personInfoStep,
        personInfoSecStep,
        personInfoTrdStep
    },
    data() {
        return {
            constants: {},
            step: 1,
            // 存储各步骤的数据
            stepData: {
                step1: null,
                step2: null,
                step3: null
            }
        };
    },
    watch: {
        step() {
            // 步骤切换时恢复数据
            this.restoreStepData();
        }
    },
    methods: {
        handleStep(newStep) {
            if (newStep === 'completed') {
                // 所有步骤完成，保存第三步数据并跳转到下一个页面
                if (this.$refs.step3) {
                    this.stepData.step3 = {
                        selectedLabels: this.$refs.step3.selectedLabels || []
                    };
                }
                
                const tagArray = this.stepData.step3?.selectedLabels.map(item => item.id)
                // 整合所有步骤的数据
                const personInfoData = {
                    // 第一步：基本信息
                    userId: uni.getStorageSync('userInfo').id,
                    nickName: this.stepData.step1?.nickName || '',
                    height: this.stepData.step1?.height || 0,
                    
                    // 第二步：头像
                    userAvatar: this.stepData.step2?.userAvatar || '',
                    
                    // 第三步：标签
                    tag: tagArray.join(','),
                };
                
                console.log('整合的个人信息数据:', personInfoData);
                
                // 将数据存储到本地，供下一个页面使用
                uni.setStorageSync('personInfoData', personInfoData);
                
                // 跳转到下一个页面
                uni.navigateTo({
                    url: '/subpage/meethuangshi/personalAuth'
                });
            } else {
                this.step = newStep;
            }
        },
        handleNext() {
            // 验证当前步骤的表单数据
            if (this.step === 1) {
                // 验证第一步：昵称和身高
                const step1Data = this.$refs.step1.form;
                if (!step1Data.nickName || !step1Data.nickName.trim()) {
                    uni.showToast({
                        title: '请输入昵称',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                if (!step1Data.height || step1Data.height <= 0) {
                    uni.showToast({
                        title: '请输入身高',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                // 保存第一步数据
                this.stepData.step1 = {
                    nickName: step1Data.nickName,
                    height: step1Data.height
                };
                // 验证通过，执行下一步
                this.$refs.step1.handleNext();
            } else if (this.step === 2) {
                // 验证第二步：头像选择
                const step2Data = this.$refs.step2.avatarForm;
                if (!step2Data.userAvatar) {
                    uni.showToast({
                        title: '请选择头像',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                // 保存第二步数据
                this.stepData.step2 = {
                    userAvatar: step2Data.userAvatar
                };
                // 验证通过，执行下一步
                this.$refs.step2.handleNext();
            } else if (this.step === 3) {
                // 验证第三步：标签选择
                const step3Data = this.$refs.step3.selectedLabels;
                if (!step3Data || step3Data.length < 3) {
                    uni.showToast({
                        title: '请至少选择3个标签',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                if (step3Data.length > 5) {
                    uni.showToast({
                        title: '最多选择5个标签',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                // 验证通过，执行下一步
                this.$refs.step3.handleNext();
            }
        },
        handleBack() {
            this.step--;
        },
        // 恢复步骤数据
        restoreStepData() {
            this.$nextTick(() => {
                if (this.step === 1 && this.$refs.step1 && this.stepData.step1) {
                    // 恢复第一步数据
                    this.$refs.step1.form = { ...this.stepData.step1 };
                } else if (this.step === 2 && this.$refs.step2 && this.stepData.step2) {
                    // 恢复第二步数据
                    this.$refs.step2.avatarForm = { ...this.stepData.step2 };
                } else if (this.step === 3 && this.$refs.step3 && this.stepData.step3) {
                    // 恢复第三步数据
                    this.$refs.step3.selectedLabels = [...this.stepData.step3.selectedLabels];
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
@import '../../static/style/common.css';

.page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    background-color: rgba(247, 246, 255, 1);
}

.group-btns {
    position: fixed;
    bottom: 28px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 14px;



    .back-btn {
        width: 66px;
        height: 48px;
        background: rgba(255, 255, 255, 1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .next-btn {
        width: 278px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        line-height: 48px;
        // background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng40d701767fd17a942668ae5d75618ebd51018b143cb05d6ffe5c4be28688f86e) 100% no-repeat;
        // background-size: 100% 100%;
        background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
        border-radius: 20px;
    }
}
</style>